<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select class="province">
        <option value="">请选择省份</option>
        <!-- <option value="A001">北京</option>
        <option value="A002">上海</option>
        <option value="A003">湖北</option>
        <option value="A004">湖南</option> -->
    </select>
    <select class="city" name="" id="">
        <option value="">请选择市/区</option>
        <!-- <option value="A001">朝阳</option>
        <option value="A002">海淀</option>
        <option value="A003">沙河</option>
        <option value="A004">上地</option> -->
    </select>
</body>
<script>

    // 二级联动
    // 1. 请求数据
    // 2. 根据数据中的省份列表 => 生成第一个下拉框
    // 3. 省份下拉框 切换时  => 对应省份的编号/下标 => 找到当前省份数据 => 获取对应的城市列表 => 渲染到城市的下拉框
    // 4. 城市下拉框 切换时  => 对应城市的编号/下标 => 找到当前城市数据 => 获取对应的县/区 => 渲染到县/区下拉框
    // 注意: 
    // 1. 直辖市 自治区 没有第三级
    // 2. select取值用value    设置下拉框的html结构 => innerHTML  

    var proSel = document.getElementsByClassName("province")[0];
    var citySel = document.getElementsByClassName("city")[0];

    var xhr = new XMLHttpRequest(); // 0

    xhr.open("get", "../data/pro.json", true); // 1

    xhr.send(); // 1

    xhr.onreadystatechange = function () {
        // 2 3 4
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 请求成功 => 拿到数据
            var res = xhr.responseText;
            res = JSON.parse(res);
            console.log(1, res);

            // 等数据取到之后 在执行后续操作

            // 1. 获取省份数据 -> 生成一级下拉框中的选项
            var { list: proList } = res;
            console.log("proList", proList);

            var html = '<option value="">请选择省份</option>';
            proList.forEach((item) => {
                var { city_id, city_name } = item;
                html += `<option value="${city_id}">${city_name}</option>`;
            })
            proSel.innerHTML = html;

            // 2. 当省份下拉框进行切换时 -> 获取当前省份数据 -> 生成城市的下拉框
            proSel.onchange = function () {
                var cityId = this.value;
                console.log(cityId);
                if (cityId) { // 选择的是省份
                    // 如何对应省份id(cityId) 从所有数据(省 直辖市 自治区)中找到当前省份的数据
                    // console.log(proList);

                    // var thisPro = proList.find((item)=>{
                    //     var {city_id,city_name} = item;
                    //     return city_id === cityId;
                    // })

                    // var thisPro = proList.find(({city_id,city_name})=>{
                    //     return city_id === cityId;
                    // })

                    var thisPro = proList.find(({ city_id }) => city_id === cityId)
                    console.log(thisPro);

                    if (thisPro) {
                        var { list: cityList } = thisPro;

                        var html = '<option value="">请选择市/区</option>';
                        cityList.forEach((item) => {
                            var { city_id, city_name } = item;
                            html += `<option value="${city_id}">${city_name}</option>`;
                        })
                        citySel.innerHTML = html;

                        citySel.onchange  = function(){

                        }

                    }



                } else { // 选择了默认 => 请选择省份
                    citySel.innerHTML = '<option value="">请选择市/区</option>'
                }
            }




        }

    }








</script>

</html>